<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>修饰符</title>
</head>
<body>

<div id="app">
    <input type="text" v-model.lazy="message">
    <p>输入的内容是：{{ message }}</p>
</div>

<hr>

<div id="app1">
    <input type="number" v-model.number="message">
    <p>输入内容的类型是{{ typeof message}}</p>
</div>

<hr>

<div id="app2">
    <input type="text" v-model.trim="message">
    <p>输入的信息是：{{ message}}</p>
    <p>信息的长度是：{{ message.length}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

    /**
     * 在输入框中v-model默认是在input事件中同步输入框的数据（中文输入法以外），使用修饰符(.lazy)会转变为在chang事件中同步。
     * 下面的例子就必须是在失焦或者按下回车时才更新到页面进行展示输出。
     **/

    var app = new Vue({
        el: "#app",
        data: {
            message: '',
        }
    });

    /**
     * (.number)修饰符可以将输入转换为Number类型（其实你默认输入的数字是String类型），该修饰符用在数字输入框情况较为有用。
     **/

    var app1 = new Vue({
        el: "#app1",
        data: {
            message: 123,
        }
    });

    /**
     * (.trim)修饰符可自动过滤输入的首尾空格。
     **/

    var app2 = new Vue({
        el: "#app2",
        data: {
            message: '',
        }
    })
</script>
</body>
</html>